import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

class ImageDemo extends StatefulWidget {
  ImageDemo({Key key}) : super(key: key);

  @override
  _ImageDemoState createState() => _ImageDemoState();
}

class _ImageDemoState extends State<ImageDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ImageDemo'),
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            children: <Widget>[
              //               有默认占位图和淡入效果
              // 在图片加载过程中，给用户展示一张默认的图片，能提高用户体验。
              // 使用FadeInImage组件来达到这个功能。FadeInImage能处理内存中，App资源或者网络上的图片。
              Container(
                child: FadeInImage.memoryNetwork(
                  // kTransparentImage/* 透明图片 */,
                  placeholder: kTransparentImage,
                  image: 'https://picsum.photos/250?image=9',
                ),
              ),
              Container(
                child: FadeInImage.assetNetwork(
                  // 占位图片为静态资源加载,
                  placeholder: 'images/banner.jpeg',
                  image: 'https://picsum.photos/250?image=9',
                ),
              ),
              // 如何缓存图片
              Container(
                child: CachedNetworkImage(
                  imageUrl: 'https://picsum.photos/250?image=9',
                  placeholder: (context, url) => CircularProgressIndicator(),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                ),
              ),
              new Container(
                padding: new EdgeInsets.all(20.0),
                child: new Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    new Row(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        new Icon(Icons.star, color: Colors.black),
                        new Icon(Icons.star, color: Colors.black),
                        new Icon(Icons.library_music, color: Colors.black),
                        new Icon(Icons.star, color: Colors.black),
                        new Icon(Icons.star, color: Colors.black),
                      ],
                    ),
                    new Text(
                      '170 Reviews',
                      style: new TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.w800,
                        fontFamily: 'Roboto',
                        letterSpacing: 0.5,
                        fontSize: 20.0,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
